import { Modal, ModalProps, Input, Button } from 'antd';
import '../styles/entry.scss';
import { useEffect, useState } from 'react';
import TagInput from '@/components/inputs/TagInput';

const { TextArea } = Input;

interface Props extends ModalProps {
  onConfirm?: (subject: string, text: string) => void;
  placeholder?: string;
  defaultText?: string;
  defaultSubject?: string;
  firstTitle: string;
  secondTitle: string;
  loading: boolean;
  isEdit: boolean;
}

const NewSynonymModal = ({
  open,
  onConfirm,
  onCancel,
  placeholder,
  defaultText = '',
  defaultSubject = '',
  firstTitle = '',
  secondTitle = '',
  title,
  isEdit,
  loading,
  ...props
}: Props) => {
  const [text, setText] = useState(defaultText);
  const [defaultTags, setDefaultTags] = useState<string[]>([]);
  const [subject, setSubject] = useState(defaultSubject);

  useEffect(() => {
    setText(defaultText);
    setDefaultTags(defaultText.split('、'));
  }, [defaultText]);
  useEffect(() => {
    setSubject(defaultSubject);
  }, [defaultSubject]);

  useEffect(() => {
    if (!open) {
      setText('');
      setSubject('');
      setDefaultTags([]);
    }
  }, [open]);

  return (
    <Modal
      destroyOnClose={true}
      maskClosable={false}
      onCancel={onCancel}
      open={open}
      {...props}
      footer={null}
    >
      <div className="m-2 text-center text-lg font-bold">{title}</div>
      <div className="mb-2">
        <div>{firstTitle}</div>
        <Input
          disabled={isEdit}
          value={subject}
          onChange={(e) => setSubject(e.target.value)}
          className="entry-input"
          bordered={false}
        />
      </div>
      <div>
        <div>{secondTitle}</div>
        {/* <TextArea
          value={text}
          onChange={(e) => setText(e.target.value)}
          className="entry-input"
          bordered={false}
          rows={6}
          placeholder={placeholder}
        /> */}
        <TagInput
          defaultTags={defaultTags}
          onChange={(tags: string[]) => setText(tags.join('、'))}
        />
      </div>
      <div className="mt-4 flex items-center justify-center gap-10">
        <Button onClick={onCancel}>取消</Button>
        <Button
          loading={loading}
          type="primary"
          onClick={() => onConfirm && onConfirm(subject, text)}
        >
          确认
        </Button>
      </div>
    </Modal>
  );
};

export default NewSynonymModal;
